<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<link th:href="@{/staticlib/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet"></link>
<title>login</title>
<style type="text/css">
body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
</style>
</head>
<body>
	<div class="container">
	<div style="margin-top: 40px;">
		<div class="row" th:if="${message != null}">
			<p>*****</p>
			<span th:text="${message}"></span>
		</div>
		
		<form id="login-form" class="form-horizontal" action="login" method="post">
			<div class="form-group">
				<label class="col-md-2 control-label" for="username">账号</label> 
				<div class="col-md-8">
					<input type="text" class="form-control" id="username" name="username" placeholder="账号" value="admin"></input>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-2 control-label" for="password">密码</label> 
				<div class="col-md-8">
					<input type="text" class="form-control" id="password" name="password" placeholder="密码" value="12345678"></input>
				</div>
			</div>
			<div class="form-group">
    			<div class="col-md-4 col-md-offset-2">
      				<button id="login-btn" type="button" class="btn btn-default">Sign in</button>
    			</div>
  			</div>
			<div class="form-group">
    			<div class="col-md-4 col-md-offset-2">
      				<!-- <button id="btn-enter" type="button" class="btn btn-default">Enter</button> -->
    			</div>
  			</div>
		</form>
	</div>
	</div>
</body>
<script type="text/javascript" th:src="@{/staticlib/js/jquery-1.12.4.min.js}"></script>
<script	type="text/javascript" th:src="@{/staticlib/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<script type="text/javascript">
	(function($){
		  $.fn.serializeJson=function(){
		    var serializeObj={};
		    var array=this.serializeArray();
		    var str=this.serialize();
		    $(array).each(function(){
		      if(serializeObj[this.name]){
		        if($.isArray(serializeObj[this.name])){
		          serializeObj[this.name].push(this.value);
		        }else{
		          serializeObj[this.name]=[serializeObj[this.name],this.value];
		        }
		      }else{
		        serializeObj[this.name]=this.value;
		      }
		    });
		    return serializeObj;
		  };
	})(jQuery);

	$("#login-btn").click(function(){
		var username = $("#username").val(); 
		var password = $("#password").val();
		$.ajax({
		url:"http://localhost:8080/login",
		type:"POST",
		data:JSON.stringify($("#login-form").serializeJson()),
		dataType:"json",
		contentType: "application/json;charset=utf-8",
		success:function(result){
			console.log(result);
			if(result.code == 200){
				console.log("location.href=" + result.data.loginUrl);
				location.href= result.data.loginUrl;
			}else{
				alert(result.data.loginfail);
			}
		}});
	});
	
	/* $("#btn-enter").click(function(){ 
		alert("nihao"); 
		}); */
	
	/* var password = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
	var password = /^[0-9A-Za-z]{6,12}$/;
	var datetime = /\d{4}-\d{2}-\d{2}/;
	$("#login-btn1").click(function(){
		if(password.test($("#password").val())){
			$("#login-form").submit();
		}else{
			var regex = /(?:ab)+/g;
			var string = "ababa abbb ababab";
			console.log( string.match(regex) );
		}
	}); */
	
	
</script>
</html>